<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		ul {
			margin: 100px auto;

		}

		li {
			width: 300px;
			list-style: none;
			text-align: center;
			line-height: 30px;
		}
	</style>
	<body>
		<ul>

		</ul>
	</body>

	<script type="text/javascript">
		var ul = document.querySelector("ul")
		console.log(ul)
		var str = "";
		for (var i = 1; i < 21; i++) {
			if (i % 2 == 1) {
				str = str + "<li style='background:pink;'>" + i + "</li>"
			} else {
				str = str + "<li style='background:green;'>" + i + "</li>"
			}
		}
		ul.innerHTML = str;
		var li = ul.children;
		console.log(li)
		var color = "";
		for (var j = 0; j < li.length; j++) {
			li[j].onmouseover = function() {
				color = this.style.background;
				this.style.background = "gold";
				console.log(this)
			}
			li[j].onmouseout = function() {
				this.style.background = color;
				console.log(this)
			}
			console.log(j)
		}
	</script>
</html>
